<!-- grid 布局 -->
<script lang="ts" setup>
import { ref } from 'vue'

let count = ref(10)
</script>

<template>
  <div class="container">
    <div class="left">
      <div class="case case1">
        <span>foo</span>
        <div class="grid-container">
          <div class="item item-1">1</div>
          <div class="item item-2">2</div>
          <div class="item item-3">3</div>
          <div class="item item-4">4</div>
          <div class="item item-5">5</div>
          <div class="item item-6">6</div>
          <div class="item item-7">7</div>
          <div class="item item-8">8</div>
          <div class="item item-9">9</div>
        </div>
        <span>bar</span>
      </div>
      <div class="case case2">
        <span>foo</span>
        <div class="grid-container">
          <div class="item item-1">1</div>
          <div class="item item-2">2</div>
          <div class="item item-3">3</div>
          <div class="item item-4">4</div>
          <div class="item item-5">5</div>
          <div class="item item-6">6</div>
          <div class="item item-7">7</div>
          <div class="item item-8">8</div>
          <div class="item item-9">9</div>
        </div>
        <span>bar</span>
      </div>
      <div class="case case3">
        <span>foo</span>
        <div class="grid-container">
          <div class="item item-1">1</div>
          <div class="item item-2">2</div>
          <div class="item item-3">3</div>
          <div class="item item-4">4</div>
          <div class="item item-5">5</div>
          <div class="item item-6">6</div>
          <div class="item item-7">7</div>
          <div class="item item-8">8</div>
          <div class="item item-9">9</div>
          <div class="item item-9">10</div>
          <div class="item item-9">11</div>
          <div class="item item-9">12</div>
        </div>
        <span>bar</span>
      </div>
    </div>
    <div class="right">
      <div class="case case4">
        <span>foo</span>
        <div class="grid-container">
          <div v-for="(item, index) of count" class="item item-1">
            {{ index }}
          </div>
        </div>
        <span>bar</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  display: flex;
}
.case {
  border: 1px orange solid;
  padding: 10px;
  margin-top: 10px;
  &:nth-of-type(n +) {
    margin-top: 10px;
  }
}
.case1 {
  .grid-container {
    display: grid;
    grid-template-columns: 50px 50px 100px;
    grid-template-rows: 50px 50px 100px;
  }
}
.case2 {
  .grid-container {
    display: inline-grid;
    grid-template-columns: repeat(3, 50px); // repeat(重复的次数，重复的值)
    grid-template-rows: 50px 50px 50px;
  }
}
.case3 {
  .grid-container {
    display: grid;
    grid-template-columns: repeat(
      3,
      50px 100px
    ); //->50px 100px 模式重复3次，6列
    grid-template-rows: repeat(100px);
  }
}
.case4 {
  width: 150px;
  text-align: center;
  .grid-container {
    display: grid;
    grid-template-columns: repeat(
      auto-fill,
      50px
    ); //->50px 100px 模式重复3次，6列
    // grid-template-rows: repeat(100px);
  }
}
span {
  font-size: 2em;
}

.item {
  font-size: 2em;
  text-align: center;
  border: 1px solid #e5e4e9;
}

.item-1 {
  background-color: #ef342a;
}

.item-2 {
  background-color: #f68f26;
}

.item-3 {
  background-color: #4ba946;
}

.item-4 {
  background-color: #0376c2;
}

.item-5 {
  background-color: #c077af;
}

.item-6 {
  background-color: #f8d29d;
}

.item-7 {
  background-color: #b5a87f;
}

.item-8 {
  background-color: #d0e4a9;
}

.item-9 {
  background-color: #4dc7ec;
}
</style>
